<!--头部组件 -->
<template>
	<div>
		<!-- 头部部分 -->
		<div class="header">
			<!-- 最顶上黑色那一块 -->
			<div class="topNav">
				<!-- 最顶上里的具体内容 -->
				<div class="topbar-nav">
					<a rel="nofollow" href="//www.mi.com/index.html"
						>小米商城</a
					>
					<span class="sep">|</span>
					<a rel="nofollow" href="//www.miui.com/" target="_blank"
						>MIUI</a
					>
					<span class="sep">|</span>
					<a rel="nofollow" href="//iot.mi.com" target="_blank"
						>IoT</a
					>
					<span class="sep">|</span>
					<a rel="nofollow" href="//i.mi.com/" target="_blank"
						>云服务</a
					>
					<span class="sep">|</span>
					<a rel="nofollow" href="//airstar.com/home" target="_blank"
						>天星数科</a
					>
					<span class="sep">|</span>
					<a rel="nofollow" href="//youpin.mi.com/" target="_blank"
						>有品</a
					>
					<span class="sep">|</span>
					<a rel="nofollow" href="//xiaoai.mi.com/" target="_blank"
						>小爱开放平台</a
					>
					<span class="sep">|</span>
					<a rel="nofollow" href="//qiye.mi.com/" target="_blank"
						>企业团购</a
					>
					<span class="sep">|</span>
					<a
						rel="nofollow"
						href="//www.mi.com/aptitude/list/?id=88"
						target="_blank"
						>资质证照</a
					>
					<span class="sep">|</span>
					<a
						rel="nofollow"
						href="//www.mi.com/aptitude/list/"
						target="_blank"
						>协议规则</a
					>
					<span class="sep">|</span>
					<a
						rel="nofollow"
						href="//www.mi.com/appdownload/"
						target="_blank"
						id="J_siteDownloadApp"
						class="topbar-download"
					>
						下载app
						<span class="appcode"
							><img
								src="../assets/download.png"
								alt="小米商城"
								width="90"
								height="90"
							/>
							小米商城APP
						</span></a
					>
					<span class="sep">|</span>
					<a
						rel="nofollow"
						href="javascript:;"
						class="J_siteGlobalRegion"
						>Select Location</a
					>
					<!-- 登录注册加购物车 -->
					<div class="topbar-nav-right">
						<a rel="nofollow" href="//www.mi.com/index.html"
							>登录</a
						>
						<span class="sep">|</span>
						<a rel="nofollow" href="//www.mi.com/index.html"
							>注册</a
						>
						<span class="sep">|</span>
					</div>
				</div>
			</div>
			<div class="site-header">
				<div class="container">
					<div class="header-logo">
						<a
							href="//www.mi.com/index.html"
							title="小米官网"
							class="logo ir"
							>小米官网</a
						>
					</div>
					<div class="header-nav">
						<ul class="nav-list">
							<li class="list-item">Xiaomi手机</li>
							<li class="list-item">Redmi红米</li>
							<li class="list-item">电视</li>
							<li class="list-item">笔记本</li>
							<li class="list-item">平板</li>
							<li class="list-item">家电</li>
							<li class="list-item">路由器</li>
							<li class="list-item">服务</li>
							<li class="list-item">社区</li>
							<li class="container-nav">
								<ul class="container-nav-ul">
									<li class="container-nav-li"></li>
								</ul>
							</li>
						</ul>
						<div class=""></div>
					</div>
					<div class="header-search">
						<input type="text" class="search-text" :placeholder="searchText"/>
						<div class="search-icon">
							<el-icon
								style="padding: 16px; border: solid 1px #e0e0e0"
								><search
							/></el-icon>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Search } from "@element-plus/icons-vue"; //引用element图标
import { ref } from "vue";
export default {
	setup(props) {
		const searchText = ref("")
		const setSearchText = ()=>{
			const arr = [
				"手机","红米","耳机","笔记本","净水器","黑鲨5","电视"
			]
			let index = 0;
			setInterval(()=>{
				searchText.value = arr[index];
				if (arr.length-1 == index) {
					index = 0
				}else{
					index ++
				}
			},4000)
		}

		return{
			searchText,
			setSearchText
		}
	},
	components: {
		Search,
	},
	created(){
		this.setSearchText()
	}
};
</script>
